<template>
  <DetailContainer class="app-container">
    <div slot="top">
      <div class="form-detail card whiteBox">
        <div class="cardHeader noborder" style="padding: 10px; font-size: 16px">
          <el-button
            icon="el-icon-arrow-left"
            size="mini"
            circle
            @click="$router.back()"
          ></el-button>
          {{ $t('inbound.detail') }}
          <div style="float: right">
            <el-button type="primary" @click="handleUpdate(form)">{{ $t('common.edit') }}</el-button>
          </div>
        </div>
        <div style="padding: 0 10px">
          <el-form
            ref="ruleForm"
            :model="form"
            label-position="left"
            label-suffix=":"
          >
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in topColumn"
                :key="index"
                :xs="24"
                :sm="item.col"
                :md="item.col"
                :lg="item.col"
                :xl="item.col"
              >
                <FormComponents :item-obj="item" :form="form" :isedit="false" />
              </el-col>
            </el-row>
          </el-form>
        </div>
        <StepsNew
          :label="statusList"
          class="status-steps"
          :status="status"
          :postMethod="'put'"
          :disable="true"
          :nodeUrl="'/wms/omsOrderShop'"
          @refresh="getDetailData"
          style="border-top: 1px solid #dcdfe6; padding: 10px 10px"
        />
      </div>
    </div>
    <div slot="info" style="margin-top: 10px">
      <InfoContainer>
        <template slot="info-left">
          <LeftInfo :ruleFrom="form" :id="form.id" />
        </template>
        <template slot="info-right"> </template>
      </InfoContainer>
    </div>
    <div slot="bottom" style="margin-top: 10px">
      <DetailTabList
        ref="DetailBody"
        :ruleFrom="form"
        @refresh="getDetailData"
      />
      <el-dialog
        :title="$t('common.edit')"
        :visible.sync="editVisible"
        class="el-dialog-normal"
      >
        <!-- <div class="foot-fixed-total" style="margin: 12px">
          <el-form
            ref="ruleForm"
            :model="form"
            label-position="left"
            label-suffix=":"
          >
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in topColumn"
                :key="index"
                :xs="24"
                :sm="item.col"
                :md="item.col"
                :lg="item.col"
                :xl="item.col"
              >
                <FormComponents :item-obj="item" :form="form" :isedit="true" />
              </el-col>
            </el-row>
          </el-form>
          <el-button @click="editVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="editSubmit">{{
            $t("common.confirm")
          }}</el-button>
        </div> -->
      </el-dialog>
    </div>
  </DetailContainer>
</template>

<script>
import { getWmsReceiptOrder } from "@/api/wms/receiptOrder";
import DetailTabList from "./components/detailTabList.vue";
import DetailContainer from "@/components/Common/detail-container/detail-container.vue";
import InfoContainer from "@/components/Common/detail-container/info-container.vue";
import FormComponents from "@/components/FormComponents/index.vue";
import StepsNew from "@/components/StepsNew/index.vue";
import RightInfo from "./components/rightInfo.vue";
import LeftInfo from "./components/leftInfo.vue";

export default {
  props: {},
  components: {
    DetailTabList,
    DetailContainer,
    InfoContainer,
    StepsNew,
    FormComponents,
    LeftInfo,
    RightInfo,
  },
  data() {
    return {
      // 表单参数
      form: {
        details: [],
        payableAmount: 0.0,
        supplierId: null,
        fromType: 1,
      },
      loading: false,

      topColumn: [
        { prop: "warehouseName", label: this.$t('common.warehouseingName'), type: "input", col: 6 },
        { prop: "areaName", label: this.$t('common.areaName'), type: "input", col: 6 },
        { prop: "cabinetNum", label: this.$t('common.CabinetNo'), type: "input", col: 6 },
        { prop: "orderNo", label: this.$t('order.orderNo'), type: "input", col: 6 },
        { prop: "remark", label: this.$t('common.remark'), type: "input", col: 6 },
      ],
      statusList: [
        {
          value: 0,
          label: this.$t('inbound.statusList.Unshipped'),
          status: 0,
          data: { status: 0 },
        },
        {
          value: 2,
          label: this.$t('inbound.statusList.Partialwarehousing'),
          status: 2,
          data: { status: 2 },
        },
        {
          value: 3,
          label: this.$t('inbound.statusList.WarehousingCompleted'),
          status: 3,
          data: { status: 3 },
        },
      ],
      status: 0,
      editVisible: false,
    };
  },
  created() {
    const { id } = this.$route.query;
    if (id) {
      this.getDetailData(id);
    }
  },
  methods: {
    getDetailData(id) {
      this.loading = true;
      getWmsReceiptOrder(id).then((response) => {
        const { details, items } = response;
        const map = {};
        (items || []).forEach((it) => {
          map[it.id] = it;
        });
        this.status = response.receiptOrderStatus;
        details && details.forEach((it) => (it.prod = map[it.itemId]));
        this.form = {
          ...response,
          details,
        };
        this.loading = false;
      });
      this.$forceUpdate();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids
      // 入库完成状态
      let finish
      if (row.receiptOrderStatus === 3) {
        finish = true
      }
      this.$router.push({ path: '/wms/receiptOrder/edit', query: { id, isEdit: true, isFinish: finish } })
    },
    editSubmit() {},
    returnBoxData(data) {
      if (data.content) {
        return data.content;
      }
    },
  },
};
</script>
